<template>
	<scroll-view class="scroll-view" scroll-y="true" @scrolltolower="scrolltolower">
		<view class="wai">
			<!-- 顶部 -->
			<view class="voucher-top">
				<view class="box-top">
					<view class="box-flex">
						<view class="diyongq">{{userProfile.voucher}}</view>
						<view>可用抵用券</view>
					</view>
					<view class="border"></view>
					<view class="box-flex" @click="goDuihuan">
						<view class="diyongq">{{userProfile.coin}}</view>
						<view>未激活抵用券</view>
					</view>
				</view>
				<!-- 抵用券 -->
				<!--  <view class="btm">
                    <image class="img" src="@/static/points2.png" mode=""></image>
                    <view class="flex">
                        <view class="">未生效抵用卷</view>
                        <view class="flex1">
                            <view class="">0</view>
                            <wd-icon name="chevron-right" size="22px"></wd-icon>
                        </view>
                    </view>
                    <view class="flex flexs">
                        <view class="">可激活抵用卷</view>
                        <view class="flex1">
                            <view class="">0</view>
                            <wd-icon name="chevron-right" size="22px"></wd-icon>
                        </view>
                    </view>
                </view> -->
			</view>
			<!-- 底部列表 -->
			<view class="bottom">
				<view class="stw">
					<view @click="switchTab(0)" :class="{ bgc1: true, active: activeIndex == 0 }">奖励明细</view>
					<view @click="switchTab(1)" :class="{ bgc1: true, active: activeIndex == 1 }">激活记录</view>
					<view @click="switchTab(2)" :class="{ bgc1: true, active: activeIndex == 2 }">使用记录</view>
				</view>
				<view class="dateView">
					<picker cancel="" mode="date" :value="dateMonth" fields="month" @change="bindDateChange">
						<view class="datebox">
							<image class="icon" src="/static/date.png" alt="" />
							<view class="text">{{dateMonth}}</view>
						</view>
					</picker>
				</view>
				<view v-show="activeIndex == 0">
					<view class="lists" v-for="it in dataList">
						<view class="list-left">
							<view>{{it.memo}}</view>
							<view class="timer">{{it.createtime}}</view>
						</view>
						<view class="list-right">+{{it.amount}}</view>
					</view>
				</view>
				<view v-show="activeIndex == 1">
					<view class="lists" v-for="it in dataList">
						<view class="list-left">
							<view>{{it.memo}}</view>
							<view class="timer">{{it.createtime}}</view>
						</view>
						<view class="list-right">+{{it.amount}}</view>
					</view>
				</view>
				<view v-show="activeIndex == 2">
					<view class="lists" v-for="it in dataList">
						<view class="list-left">
							<view>{{it.memo}}</view>
							<view class="timer">{{it.createtime}}</view>
						</view>
						<view class="list-right">+{{it.amount}}</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		user,
		verified,
		getVoucherList,
		getVoucherActivateList,
		getvoucherUseLog
	} from '@/api/index.js';
	import {
		utils
	} from '@/utils/utils.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	const userProfile = ref({}); //存储用户信息
	const activeIndex = ref(0); //0结算日期，1参与订单数 2收入抵用券
	const dateMonth = ref('')
	const page = ref(1)
	const limit = ref(10)
	const selMonth = ref('')
	const switchTab = (value) => {
		activeIndex.value = value;
		page.value = 1
		dataList.value = []
		getList()
	};
	const last_page = ref(0)
	const current_page = ref(0)
	const dataList = ref([])
	onShow(() => {
		userInfo(); //获取用户信息
		getMonth()
	});
	const scrolltolower = () => {
		if(current_page.value<last_page.value){
			page.value = page.value+1
			getList(selMonth.value)
		}else{
			console.log('没有更多数据了');
		}
		console.log('滚动到底部');
	};
	const getMonth = async () => {
		let date = new Date();
		let month = date.getMonth() + 1;
		let year = date.getFullYear()
		let lastDay = new Date(year, month, 0).getDate();
		page.value = 1
		dateMonth.value = `${year}年${month}月`
		selMonth.value = `${year}-${month}-01 - ${year}-${month}-${lastDay}`
		dataList.value = []
		getList(selMonth.value)
		
	}
	const bindDateChange = (e) => {
		console.log(e)
		let d = e.detail.value.split('-')
		dateMonth.value = `${d[0]}年${d[1]}月`
		page.value = 1
		let lastDay = new Date(d[0], d[1], 0).getDate();
		selMonth.value = `${d[0]}-${d[1]}-01 - ${d[0]}-${d[1]}-${lastDay}`
		dataList.value = []
		getList(selMonth.value)
	}
	// 获取用户信息
	const userInfo = async () => {
		const ret = await user();
		if (ret.code == 1) {
			userProfile.value = ret.data;
			
			// console.log('个人信息', userProfile.value);
		} else {
			utils('数据加载失败！');
		}
	};
	const getList = async () => {
		if(activeIndex.value==0){
			coucherList()
		}else if(activeIndex.value==1){
			voucherActivateList()
		}else if(activeIndex.value==2){
			voucherUseLog()
		}
	}
	const coucherList =  async (time) => {
		const ret = await getVoucherList({page:page.value,limit:limit.value,query_time:selMonth.value});
		if (ret.code == 1) {
			console.log(ret)
			last_page.value = ret.data.last_page
			current_page.value = ret.data.current_page
			dataList.value = dataList.value.concat(ret.data.data)
		} else {
			utils('数据加载失败！');
		}
	};
	const voucherActivateList =  async (time) => {
		const ret = await getVoucherActivateList({page:page.value,limit:limit.value,query_time:selMonth.value});
		if (ret.code == 1) {
			console.log(ret)
			last_page.value = ret.data.last_page
			current_page.value = ret.data.current_page
			dataList.value = dataList.value.concat(ret.data.data)
		} else {
			utils('数据加载失败！');
		}
	};
	const voucherUseLog =  async (time) => {
		const ret = await getvoucherUseLog({page:page.value,limit:limit.value,query_time:selMonth.value});
		if (ret.code == 1) {
			console.log(ret)
			last_page.value = ret.data.last_page
			current_page.value = ret.data.current_page
			dataList.value = ret.data.data
			dataList.value = dataList.value.concat(ret.data.data)
		} else {
			utils('数据加载失败！');
		}
	};
	const goDuihuan = ()=>{
		uni.navigateTo({
			url:'/pages/sub/jfduihuan'
		})
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		height: 100vh;
	}

	.wai {

		// 底部列表
		.bottom {
			.dateView {
				width: 100%;
				height: 100rpx;
				background: rgba(255, 182, 72, 0.5);
				margin: 50rpx 0 30rpx 0;
				display: flex;
				align-items: center;

				.datebox {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					padding: 0 50rpx;
					box-sizing: border-box;

					.icon {
						width: 50rpx;
						height: 50rpx;
						margin: 0 20rpx 0 0;
					}

					.text {
						color: #999;
					}
				}
			}

			// 列表
			.lists {
				.list-left {
					.timer {
						color: #999999;
						font-size: 24rpx;
						margin-top: 16rpx;
					}
				}

				.list-right {
					font-size: 48rpx;
					color: #ff0000;
				}

				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				height: 164rpx;
				border-bottom: 2rpx solid #f5f5f5;
			}

			.stw {
				.bgc1 {
					width: 202rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					border-radius: 50rpx;
				}

				// 动态类名
				.active {
					background-color: #ffc762;
					width: 202rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					border-radius: 50rpx;
					color: #fff;
				}

				display: flex;
				padding: 0 18rpx;
				align-items: center;
				justify-content: space-between;
			}

			padding: 38rpx 30rpx 0;
			background: #ffffff;
			border-radius: 50rpx 50rpx 0 0;
			min-height: 64vh;
		}

		// 顶部
		.voucher-top {

			// 抵用券
			.btm {
				.flex {
					width: 582rpx;
					position: absolute;
					left: 54rpx;
					top: 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #fff;

					.flex1 {
						display: flex;
						align-items: center;
					}
				}

				.flexs {
					top: 80rpx;
				}

				.img {
					width: 642rpx;
					height: 142rpx;
					border-radius: 20rpx;
				}

				text-align: center;
				position: relative;
			}

			// 上面
			.box-top {
				.border {
					width: 4rpx;
					height: 48rpx;
					background: #ffffff;
				}

				.box-flex {
					.diyongq {
						font-size: 60rpx;
					}

					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					color: #fff;
				}

				height: 230rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 74rpx;
			}

			height: 240rpx;
			width: 690rpx;
			border-radius: 20rpx 20rpx 0 0;
			background: linear-gradient(to top right, #ffb648, #ffe8be);
			margin: auto;
		}

		padding: 44rpx 0 100rpx 0;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
</style>